import React, { useState, useEffect } from "react";
import { Sidebar } from "react-vant";
import axios from "axios";

export default () => {
  const [active, setActive] = useState(0);
  const [list, setList] = useState<any[]>([]);
  const fetchData = async () => {
    const resp = await axios.get("/api/list");
    setList(resp.data.list);
  };
  useEffect(() => {
    fetchData();
  }, []);
  return (
    <Sidebar value={active}>
      {list &&
        list.map(v => (
          <Sidebar.Item
            contentStyle={{ backgroundColor: "#fff", padding: "18px 10px" }}
            title={v.title}
          >
            {v.children &&
              v.children.map((v: any) => {
                return (
                  <dl
                    style={{
                      display: "flex",
                      alignItems: "center",
                      padding: "5px 15px",
                    }}
                    key={v.id}
                  >
                    <dt>
                      <img src={v.src} alt="" />
                    </dt>
                    <dd>
                      <h3>{v.title}</h3>
                      <p>{v.word}</p>
                    </dd>
                  </dl>
                );
              })}
          </Sidebar.Item>
        ))}
    </Sidebar>
  );
};
